<!-- <title>瑞众银保“五个一”功成---客户经理月度计划<title> -->
<style lang="less" scoped>
@import '@css/list.less';
</style>
<template>
  <div id="app">
    <van-sticky>
      <div class="title">月度计划</div>
    </van-sticky>
    <van-form @submit="onsaveEachForm" @failed="onFailed">
      <van-cell-group inset>
        <van-field
          name="uploader1"
          label="上传月度计划图片"
          :rules="[{ required: true, message: '请上传不超过1张照片,5M以内' }]"
        >
          <template #input>
            <van-uploader
              v-model="uploaderImgList"
              :max-count="1"
              :before-read="onbeforeRead"
              :after-read="onafterRead"
            ></van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <div class="button">
        <van-button block type="primary" native-type="submit" style="width: 55%">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import { yb51_file_record_saveEachForm } from '@/request/api.js'

onMounted(() => {
  agentcode = route.query.agentcode
})

let agentcode

const uploaderImgList = ref([])

import { compressImageToTargetSize } from '@/utils'
const targetSize = 1024 * 1024 * 1 // 1M大小
function onbeforeRead(file) {
  return new Promise((resolve, reject) => {
    console.log('压缩前文件大小:', file.size/(1024 * 1024), 'M')
    if (file.size < targetSize) {
      console.log('小于，不用压缩')
      resolve(file)
    } else {
      compressImageToTargetSize(file, targetSize).then((res) => {
        console.log('压缩后的文件大小:',res.size/(1024 * 1024), 'M')
        resolve(res)
      })
    }
  })
}
//文件读取后的回调函数
function onafterRead(file) {
  console.log('读取完毕')
}

//客户经理月度计划
function onsaveEachForm() {
  showPageLoading()
  var formdata = new FormData()
  formdata.append('agentCode', agentcode)
  formdata.append('category', '客户经理月度计划')
  formdata.append(
    'multipartFile',
    uploaderImgList.value[0].file,
    uploaderImgList.value[0].file.name
  )

  yb51_file_record_saveEachForm(formdata).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      showDialog({
        title: '提交成功',
        message: '点击确认后返回首页'
      }).then(() => {
        window.history.go(-1)
      })
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}

function onFailed() {
  console.log('出错了')
}
</script>
